<template>
  <link type="text/css" rel="stylesheet" href="/assets/css/style.css">
  <link rel="stylesheet" href="/assets/css/coupon.css">
  <div class="coupon_list" v-if="list">
    <li v-for="(item,key) in list" :key="key">
        <div class="coupon_item">
            <div class="item_content">
                <router-link :to="{path: '/coupon/info', query: {cid: item.id}}">
                    <div class="left">
                        {{item.rate*100}}<span>折</span>
                    </div>
                    <div class="right">
                        <div>{{item.name}}</div>
                        <div>订单满<span> 100元 </span>打 <span>{{item.rate*100}} 折</span></div>
                        <div>每人限领1张</div>
                        <div>领取后10天内有效</div>
                    </div>
                </router-link>
            </div>
            <div class="item_btn">
              <div v-if="item.receive">
                <router-link :to="{path: '/coupon/info', query: {cid: item.id}}">
                <button class="right_btn1">立即领取</button>
                </router-link>
              </div>
              <div v-else>
                <router-link :to="{path: '/coupon/info', query: {cid: item.id}}">
                <button class="receive_btn">已领取</button>
                </router-link>
              </div>
            </div>
        </div>
    </li>
  </div>
</template>

<script setup>
import { onBeforeMount, reactive } from 'vue';

  const {proxy} = getCurrentInstance()

  let business = proxy.$business

  let list = ref([])

  onBeforeMount(()=>{ CouponList() })

  const CouponList = async () => 
  {
      //发起请求
      var result = await proxy.$POST({
        url: '/coupon/index',
        params: { busid: proxy.$business.value.id }
      })

      //要么是出错 要么没有数据
      if(result.code == 0)
      {
          proxy.$fail(result.msg)
          return false
      }

      list.value = result.data.list

  }
</script>